<template> <div class="page-container">
  <div class="toolbar">
     <el-row>
      <el-tabs type="border-card">
       <el-tab-pane label="规则基本信息编辑">
       <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
       <el-row style="margin-top: -20px;width: 45%; margin: 0px auto;" >
       <el-divider content-position="center">
        <span style="font-size:16px;font-weight:800">规则基本信息编辑</span>
       </el-divider>
       <!-- 场景选择判断 -->

        <el-form-item label="选择场景名称"    prop="sceneName">
         <el-select v-model="dataForm.sceneName"  placeholder="请输入" default-first-option filterable allow-create  @change="getScene(2)" >
          <el-option v-for="item in searchScene"  :key="item.sceneName" :label="item.sceneName" :value="item.sceneName"></el-option>
         </el-select>
       </el-form-item>
      <!--  选择积分类型 -->
        <el-form-item label="积分规则类型"   prop="ruleType">
        <el-select v-model="dataForm.ruleType"  placeholder="请输入" @change="additionalBtn">
                <el-option label="基本规则" :value="1">基本规则</el-option>
                <el-option label="限制规则" :value="2">限制规则</el-option>
                <el-option label="额外规则" :value="3">额外规则</el-option>
         </el-select>
       </el-form-item>
       <!-- 选择积分增加类型 -->
       <el-form-item label="积分增加类型" prop="addType">
         <el-select v-model="dataForm.addType"  placeholder="请选择" @change="isAddType" >
                <el-option label="区间(随机)" :value="1">区间(随机)</el-option>
                <el-option label="固定值" :value="2">固定值</el-option>
                <!-- <el-option label="转换率" value="3">转换率</el-option> -->
                <el-option label="递增" :value="4">递增</el-option>
                <el-option label="满加" :value="5">满加</el-option>
               <!--  <el-option label="计算" value="6">计算</el-option> -->
         </el-select>
       </el-form-item>
      <!-- 额外规则-->
       <el-form-item label="额外规则按钮" v-show="this.addBtn">
         <el-select v-model="dataForm.extraBtn"  placeholder="是否允许增加按钮" >
                <el-option label="不允许" :value="0">不允许</el-option>
                <el-option label="允许" :value="1">允许</el-option>
         </el-select>
       </el-form-item>
<!--
      isSection:false,//区间
      isFixed:false,//固定
      isConvert:false,//转换
      isIncreasing:false,//递增
      isManka:false,//满加
      isCompute:false,//计算 -->

    <!-- 下方规则需通过动态选择  增加类型 固定值 -->
    <el-form-item label=""  v-show="isFixed">
      <el-form-item>
        <el-input v-model="sumForm.one" placeholder="例：每位新注册用户增加"></el-input>
      </el-form-item>
      <span>(&nbsp;)&nbsp;&nbsp;</span>
      <el-form-item >
          <el-select  v-model="sumForm.two"    placeholder="请选择积分或次" default-first-option filterable allow-create>
            <el-option label="积分" value="积分">积分</el-option>
            <el-option label="次" value="次">次</el-option>
           </el-select>
      </el-form-item>
    </el-form-item>

    <!-- 下方规则需通过动态选择  增加类型区间值 -->
      <el-form-item  v-show="isSection">
        <el-input v-model="sumForm.one" placeholder="例：设置发放积分区间值"></el-input>
      </el-form-item>

    <!-- 下方规则需通过动态选择  增加类型递增 -->
    <el-form-item label=""  v-show="isIncreasing">
      <el-form-item>
        <el-input v-model="sumForm.one" placeholder="例：每日签到增加"></el-input>
      </el-form-item>
<span>(&nbsp;)&nbsp;&nbsp;</span>
      <el-form-item >
          <el-select  v-model="sumForm.two"   placeholder="请选择积分或次"  default-first-option filterable allow-create>
            <el-option label="积分" value="积分">积分</el-option>
            <el-option label="次" value="次">次</el-option>
           </el-select>
      </el-form-item>

       <el-form-item >
        <el-input v-model="sumForm.three" placeholder="例：连续签到递增公差为" ></el-input>
      </el-form-item>
<span>(&nbsp;)&nbsp;&nbsp;</span>
       <el-form-item >
            <el-select  v-model="sumForm.four"   placeholder="请选择积分或次"  default-first-option filterable allow-create >
            <el-option label="积分" value="积分">积分</el-option>
            <el-option label="次" value="次">次</el-option>
           </el-select>
      </el-form-item>
    </el-form-item>

    <!-- 下方规则需通过动态选择  增加类型 满加 -->
    <el-form-item label=""  v-show="isManka">
      <el-form-item>
        <el-input v-model="sumForm.one" placeholder="例：连续签到满"></el-input>
      </el-form-item>
<span>(&nbsp;)&nbsp;&nbsp;</span>
      <el-form-item >
          <el-select  v-model="sumForm.two"   placeholder="请选择积分或次"  default-first-option filterable allow-create>
            <el-option label="积分" value="积分">积分</el-option>
            <el-option label="次" value="次">次</el-option>
           </el-select>
      </el-form-item>

       <el-form-item >
        <el-input v-model="sumForm.three" placeholder="例：额外增加" ></el-input>
      </el-form-item>
<span>(&nbsp;)&nbsp;&nbsp;</span>
       <el-form-item >
          <el-select  v-model="sumForm.four"   placeholder="请选择积分或次"  default-first-option filterable allow-create >
            <el-option label="积分" value="积分">积分</el-option>
            <el-option label="次" value="次">次</el-option>
           </el-select>
      </el-form-item>
    </el-form-item>


 <!--     <el-form-item>
        <el-input style="width:331px" disabled v-model="dynamicExpression" placeholder="展示"></el-input>
      </el-form-item> -->

       <el-form-item label="申请原因"  prop="applyReason">
        <el-input type="textarea"  style="width: 13rem;" v-model="dataForm.applyReason" placeholder="申请原因"></el-input>
       </el-form-item>
         <el-form-item label="开始日期：">
           <el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="请输入开始日期"></el-date-picker>
         </el-form-item>
         <el-form-item label="结束日期：">
           <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="请输入结束日期"></el-date-picker>
         </el-form-item>
       </el-row>
      </el-form>
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>
         <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
        </el-button-group>
       </div>
      </div>
     </el-tab-pane>
    </el-tabs>
   </el-row>
  </div>
 </div>
</template>
<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import { mapState } from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from "v-distpicker";
import elTree from "@/views/tree/src/tree.vue";

//二.数据输出区
export default {
  //2.1 注册组件
  components: {
    jicTable,
    ThemePicker,
    LangSelector,
    VDistpicker,
    elTree
    /* 查询场景信息 */
  },

  //2.2 数据初始化区
  data() {
    return {
      //2.2.1 公共数据初始化
      searchSize: "mini",
      /*场景所需对象定义*/
      searchScene: [], //场景对象
      sceneArr: [], //场景id数组
      /*定义是否允许新增额外限制*/
      addBtn: false,
      isaddBtn: null, //定义是否允许新增额外按钮
      /* 定义表达式部分 */
      dynamicExpression: "",
      sumFormSplit:[],
      sumForm: {
        one: "",
        two: "",
        three: "",
        four: "",
        five: ""
      },
      /*定义积分增加类型 */
      isSection: false, //区间
      isFixed: false, //固定
      isConvert: false, //转换
      isIncreasing: false, //递增
      isManka: false, //满加
      isCompute: false, //计算

      /*定义模板数据*/
      addType: null,

      // 2.2.2 form 表单数据初始化
      dataForm: {
        id: null,
        pid: null,
        sceneId: null,
        sceneName: null,
        code:null,
        action: null,
        addType: null,
        ruleType: null,
        extraType: null,
        expression: "",
        title: null,
        addScore: null,
        increaseScore: null,
        minScore: null,
        maxScore: null,
        fullNum: null,
        dailyNum: null,
        maxNum: null,
        productType: null,
        deleteFlag: null,
        weight: null,
        ruleTypeShow: null,
        hrShow: null,
        extraBtn: null,
        description: null,
        applierId: null,
        applyReason: null,
        auditorId: null,
        auditReason: null,
        createTime: null,
        updateTime: null,
        creator: null,
        creatorName: null,
        updater: null,
        updaterName: null,
        auditSts: null,
        templateId: null,
        currentAction:null,
        startTime:null,
        endTime:null
      },
      //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
      dataFormRules: {
   sceneName:[
   { required: true, message: "请选择或输入场景名称", trigger: "blur" }
   ], /*
   action:[
   { required: true, message: "请输入处理", trigger: "blur" },
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" },
   ], */
   addType:[
   { required: true, message: "请选择增加的类型", trigger: "blur" }
   ],
   ruleType:[
   { required: true, message: "请选择规则类型", trigger: "blur" }
   ],
   applyReason:[
   { required: true, message: "请输入申请原因", trigger: "blur" }
   ],
   startTime: [
     { required: true, message: "请选择开始日期", trigger: "blur" },
   ],
   endTime: [
     { required: true, message: "请选择结束日期", trigger: "blur" },
   ]
      }
    }; //return 完结;
  }, //data()方法 完结;

  //2.3 Vue 方法区
  methods: {
    //2.3.1 公共方法区
getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = now.getHours(); //得到日期
      var minute = now.getMinutes(); //得到日期
      var second = now.getSeconds(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var endYear = year + 10;
     var endTime = endYear+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
      //dataForm.startTime
    /*   this.$set(this.dataForm, "startTime", startTime);
      this.$set(this.dataForm, "endTime", endTime); */
      let this_= this;
      this_.dataForm.startTime = now;
      this_.dataForm.endTime = endTime;
    },
    //通过类型
    AddUpsumForm() {
      let this_ = this;
      let ex = '';
      if(this_.dataForm.addType == 1){
         ex = this.sumForm.one+"&nbsp;<input class=\"a\" type=\"number\" min=\"1\" max=\"9999\" oninput=\"if(value.length>4)value=value.slice(0,4)\"   v-model=\"minScore\" \"/>&nbsp;<input  class=\"a\" type=\"number\" min=\"1\" max=\"9999\" oninput=\"if(value.length>4)value=value.slice(0,4)\"   v-model=\"maxScore\"  \"/>";
      }
      if(this_.dataForm.addType == 2){
         ex = this.sumForm.one+"&nbsp;<input  class=\"a\" type=\"number\" min=\"1\" max=\"9999\" oninput=\"if(value.length>4)value=value.slice(0,4)\"  v-model=\"addScore\"/>&nbsp;"+this.sumForm.two;
      }
      if(this_.dataForm.addType == 4){
        ex = this.sumForm.one+"&nbsp;<input  class=\"a\" type=\"number\" min=\"1\" max=\"9999\" oninput=\"if(value.length>4)value=value.slice(0,4)\"  v-model=\"increaseScore\"/>&nbsp;"+this.sumForm.two+"，"+this.sumForm.three+"&nbsp;<input  class=\"a\" type=\"number\" min=\"1\" max=\"9999\" oninput=\"if(value.length>4)value=value.slice(0,4)\"  v-model=\"increaseScore\"/>&nbsp;"+this.sumForm.four;
      }
      if(this_.dataForm.addType == 5){
        ex = this.sumForm.one+"&nbsp;<input  class=\"a\" type=\"number\" min=\"1\" max=\"9999\" oninput=\"if(value.length>4)value=value.slice(0,4)\"  v-model=\"fullNum\"/>&nbsp;"+this.sumForm.two+"，"+this.sumForm.three+"&nbsp;<input  class=\"a\" type=\"number\" min=\"1\" max=\"9999\" oninput=\"if(value.length>4)value=value.slice(0,4)\"  v-model=\"addScore\"/>&nbsp;"+this.sumForm.four;
      }
        this.dataForm.expression = ex;
     },
    //配置额外规则按钮
    additionalBtn() {
      this.dataForm.ruleType == 3 ? (this.addBtn = true) : (this.addBtn = false);
    },

    /*       isSection:false,//区间
      isFixed:false,//固定
      isConvert:false,//转换
      isIncreasing:false,//递增
      isManka:false,//满加
      isCompute:false,//计算 */
    isAddType(num) {
      let this_ = this;
      if (num == 1) {
        this_.isSection = true; //区间
        this_.isFixed = false; //固定
        this_.isConver = false; //转换
        this_.isIncreasing = false; //递增
        this_.isManka = false; //满加
        this_.isCompute = false; //计算
      } else if (num == 2) {
        this_.isSection = false; //区间
        this_.isFixed = true; //固定
        this_.isConver = false; //转换
        this_.isIncreasing = false; //递增
        this_.isManka = false; //满加
        this_.isCompute = false; //计算
      } else if (num == 4) {
        this_.isSection = false; //区间
        this_.isFixed = false; //固定
        this_.isConver = false; //转换
        this_.isIncreasing = true; //递增
        this_.isManka = false; //满加
        this_.isCompute = false; //计算
      } else if (num == 5) {
        this_.isSection = false; //区间
        this_.isFixed = false; //固定
        this_.isConver = false; //转换
        this_.isIncreasing = false; //递增
        this_.isManka = true; //满加
        this_.isCompute = false; //计算
      } else if (num == 6) {
        this_.isSection = false; //区间
        this_.isFixed = false; //固定
        this_.isConver = false; //转换
        this_.isIncreasing = false; //递增
        this_.isManka = false; //满加
        this_.isCompute = true; //计算
      } else {
        this_.isSection = false; //区间
        this_.isFixed = false; //固定
        this_.isConver = false; //转换
        this_.isIncreasing = false; //递增
        this_.isManka = false; //满加
        this_.isCompute = false; //计算
      }
    },

    //查看场景是否存在
    getScene(num) {
      // 查询数据库中的场景
      let this_ = this;
      if (num == 1) {
        let params = {};
        this.utils.request.getConfActivityRuleDetailTemplateScene(
          params,
          function(res) {
            if (res.code === "0000") {
              this_.searchScene = res.data;
              //将场景id，插入数组中
              res.data.forEach(function(item, index) {
                this_.sceneArr.push(item.sceneName);
              });
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          }
        );
      } else {
        //进入此方法说明场景发生了改变。
        //获取当前场景的参数。判断是否存在已有的场景，如果存在不做判断，如果不存在，代表新增。
        console.log(this_.sceneArr);
        //
        if (this_.sceneArr.length <1){
         this_.dataForm.sceneId = 1;
        }else if (this_.sceneArr.indexOf(this_.dataForm.sceneName) < 0) {
          this_.dataForm.sceneId = parseInt(this_.searchScene[this_.searchScene.length - 1].sceneId) + 1;
        } else {
          this_.dataForm.sceneId = this_.searchScene[this_.sceneArr.indexOf(this_.dataForm.sceneName)].sceneId;
        }
        /*     if(this.searchScene){

    } */
      }
    },
    //2.请求列表数据
    getDetail() {
      debugger
      let this_ = this;
      if (this.$route.query != null && this.$route.query.id != null && this.$route.query.id != "" && this.$route.query.id != "null" && this.$route.query.id != "undefined") {
        let params = {};
        params.id = this.$route.query.id;
        if(this.$route.query.activeName == "second"){
        this.utils.request.getConfActivityRuleDetailTemplateApplyDetail(
          params,
          function(res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
              /*回显表单数据 */
                this_.sumFormSplit = this_.dataForm.expression.split(/(，|&nbsp;)/);
                 if( this_.sumFormSplit.length == 3){
                    this_.sumForm.one = this_.sumFormSplit[0];
                }else if(this_.sumFormSplit.length == 5){
                    this_.sumForm.one = this_.sumFormSplit[0];
                    this_.sumForm.two = this_.sumFormSplit[4];
                }else if(this_.sumFormSplit.length == 11){
                    this_.sumForm.one = this_.sumFormSplit[0];
                    this_.sumForm.two = this_.sumFormSplit[4];
                    this_.sumForm.three = this_.sumFormSplit[6];
                    this_.sumForm.four = this_.sumFormSplit[10];
                }else{
                    this_.sumForm.one = this_.sumFormSplit[0];
                }
              this_.additionalBtn();
              this_.AddUpsumForm();
              this_.isAddType(this_.dataForm.addType);

            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          }
        );
        }else{
        this.utils.request.getConfActivityRuleDetailTemplateDetail(
          params,
          function(res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
              /*回显表单数据 */
                this_.sumFormSplit = this_.dataForm.expression.split(/(，|&nbsp;)/);
                if( this_.sumFormSplit.length == 3){
                    this_.sumForm.one = this_.sumFormSplit[0];
                }else if(this_.sumFormSplit.length == 5){
                    this_.sumForm.one = this_.sumFormSplit[0];
                    this_.sumForm.two = this_.sumFormSplit[4];
                }else if(this_.sumFormSplit.length == 11){
                    this_.sumForm.one = this_.sumFormSplit[0];
                    this_.sumForm.two = this_.sumFormSplit[4];
                    this_.sumForm.three = this_.sumFormSplit[6];
                    this_.sumForm.four = this_.sumFormSplit[10];
                }else{
                    this_.sumForm.one = this_.sumFormSplit[0];
                }
              this_.additionalBtn();
              this_.AddUpsumForm();
              this_.isAddType(this_.dataForm.addType);

            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          }
        );
        }
      }else{
        this.getNowTime();
      }
    },

    submitForm: function() {
      let this_ = this;
      this_.$refs.dataForm.validate(valid => {
        if (valid) {
          this_.$confirm("确认提交吗？", "提示", {}).then(() => {
            this_.editLoading = true;
              this_.AddUpsumForm();
            let params = this.dataForm;
          if(this.$route.query.activeName == "second" || this.$route.query.action == "insert"){
            this_.utils.request.saveConfActivityRuleDetailTemplateApply(params,
              function(res) {
                if (res.code === "0000") {
                  this_.$message({ message: "操作成功", type: "success" });
                } else {
                  this_.$message({ message: "操作失败", type: "error" });
                }
              }
            );
          }else{
            this_.utils.request.saveConfActivityRuleDetailTemplate(
              params,
              function(res) {
                if (res.code === "0000") {
                  this_.$message({ message: "操作成功", type: "success" });
                } else {
                  this_.$message({ message: "操作失败", type: "error" });
                }
              }
            );
          }
            this_.$router.go(-1);
          });
        }
      });
    },
    // 7.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 8.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    /*图片预览*/
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*图片移除*/
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    back() {
      this.$router.go(-1);
    }
    //==========2.3.1 JavaScript 自定义方法区==========
  },
  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    this.getDetail();
    this.getScene(1);
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
